<template>
  <div class="contene">
    <div class="contene_app" v-for="item in groupBuyName">
          <div class="app_top_wrap">
            <text class="app_top" style="padding-left: 55px;">{{ item.name }}</text>
          </div>
          <div class="app"  >
            <div class="app_left">
              <image class="app_left_image" :src="item.thumbnail"/>
            </div>
            <div class="app_right">
              <div class="app_right_top">
                <text class="app_right_text">{{ item.subTitle }}</text>
              </div>
              <div class="app_right_middle_wrpa">
                <text class="app_right_middle">{{item.name.replace("区","")}}券:</text>
                <text class="app_right_middle" style="padding-left: 10px">1张</text>
              </div>
              <div class="button01_wrap">
                <button @click="participateActivities(item)" class="button01"  text="参加活动"  style="width:200px;height:60px;	 background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));margin-top: 25px;margin-right:25px;border-radius: 10px;"></button>
              </div>
            </div>
          </div>
    </div>
    <div class="privacyBox" @click=""  v-if="privacyType == true" >
            <div class="privacyContent" >
              <text class="privacy_headerTitle">{{popUpTitle}}</text>
              <list style="height: 980px;">
                <cell>
                  <html :key="times" style="padding-left: 20px;padding-right: 20px;margin-top: 20px" :content="popUpContent" :imgWidth="750">
                </html>
                </cell>
              </list>
              <div class="privacy_botton">
                <div class="privacy_botton_left" @click="disagreeClick">
                  <text class="privacy_botton_left_title">不同意</text>
                </div>
                <div class="privacy_botton_right" @click='agreeClick'>
                  <text class="privacy_botton_right_ittle">同意并继续</text>
                </div>
              </div>
            </div>
        </div>
  </div>
</template>
<script>
import { activate } from "../../../../api/groupOrder";
import {list as groupBuyList, list} from "../../../../api/groupBuy";
import {list as articleList} from "../../../../api/article";
import myNavbar from '../../../../components/myNavbar/myNavbar.vue'
import html from '../../../../components/html/htmlThree.vue'


export default {
  components: {
    myNavbar,html
  },
  data() {
    return {
      statusBarHeight: eeui.getStatusBarHeightPx(),
      groupBuylist: [],
      pageSize: 20,
      pageNum: 1,
      name: "",
      refreshTitle: '释放刷新页面...',
      refreshing: false,
      loadinging: false,
      privacyType:false,
      groupId:'',
      popUpTitle:'',
      popUpContent:'',
      times:null,
      groupBuyName:[]
    };
  },
  created() {
    this.groupBuyclick();
    this.loadGroupBuy();
  },
  methods: {
    loadGroupBuy(){
      var _this = this
      groupBuyList({mchId:_this.getGlobalData().mchId,isShow:false,type:2}).then(res=>{
        _this.groupBuyName= res.data.data
      })
    },
    getArticleList(item){
        let params = {}
      // params.tagIds = this.privacyId,
      // params.tagIds = 15
      params.pageNum = 1
      params.pageSize = 10
      params.mchId = this.getGlobalData().mchId
      console.info(item.name)
      params.title = item.name
      articleList(params).then(res=>{
        console.info(res)
        this.popUpTitle =res.data.data[0].subTitle
          this.popUpContent = res.data.data[0].content
          this.times = new Date().getTime()
        this.privacyType = true
      }).catch(respond=>{})

    },
    agreeClick(){
      let params = {}
      params.groupBuyId = this.groupId
      console.log(params)
      activate(params).then(res=>{
        if(res.type == 'success'){
          eeui.toast('参加成功')
          eeui.openPage({
            url: 'root://pages/member/groupbuy/order.js',
            params: "",
            statusBarType: 'immersion',
            statusBarStyle: false
          });
          this.privacyType = false
        }else {
          this.privacyType = false
        }

      }).catch(respond=>{
        // eeui.toast(respond)
        this.privacyType = false
      })
    },
    disagreeClick(){
      this.privacyType = false
    },
    participateActivities(item){
      new Promise((resolve, reject) => {
        this.getArticleList(item)
        resolve()
      }).then(() => {
        this.groupId = item.id
        // this.privacyType = true
      })

    },
    onloading(event) {
      console.log("揍你");
      this.loadinging = true
      setTimeout(() => {
        this.loadinging = false
        this.pageNum += 1
        this.groupBuyclick()
      }, 1000)
    },
    onpullingdown(event) {
      console.log('下拉了')
      this.refreshTitle = '释放刷新页面...'
    },
    onrefresh(event) {
      var _this = this
      console.log('下拉完成')
      this.refreshing = true
      this.refreshTitle = '加载中...'
      setTimeout(() => {
        _this.pageNum = 1;
        _this.groupBuylist = []
        _this.groupBuyclick()
        _this.refreshing = false
      }, 2000)
    },
    gotobuy(data, item) {
      var obj = {
        productId: data.productId,
        groupId: item.id,
        productType: 'group',
        priceBox: item.price
      }
      eeui.openPage({
        params: obj,
        url: 'root://pages/goods/product/groupBuydetails.js',
        statusBarType: 'immersion',
        statusBarStyle: false,
      })
    },
    groupBuyclick() {
      list({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        mchId: this.getGlobalData().mchId,
        type: 2
      }).then((res) => {

        res.data.data.forEach(element => {
          this.groupBuylist.push(element)
        });
      });
    },
  },
};
</script>
<style scoped>
.contene {
  flex: 1;
  background-color: rgba(248, 248, 248, 0.8);
  /*background-color: orange;*/
}
.contene_app {
  margin-top: 10px;
}
.app {
  width: 710px;
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 20px;
  margin-left: 20px;
}

.app_top {
  font-size: 32px;
  color: #333333;
  margin-top: 10px;
  padding-left: 40px;
}

.app_left {
  width: 200px;
  height: 210px;
  margin-top: 10px;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-radius: 5px;
}
.app_left_image{
  width:200px;
  height:200px;
  margin-top: 15px;
}
.app_right {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  width: 510px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.app_right_top{
  /*background-color: orange;*/
  height: 100px;
}
.app_right_middle_wrpa{
  display: flex;
  flex-direction: row
}
.app_right_middle{
  font-size: 30px;
  padding-left: 10px

}

.app_right_text {
  /*margin-left: 10px;*/
  margin-right: 10px;
  padding-right: 10px;
  margin-top: 10px;
  color: #333333;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  max-height: 80px;
  color: rgba(26, 26, 30, 1);
  line-height: 40px;
  lines: 2;
  text-overflow: ellipsis;
}

.food-item-money {
  font-weight: bold;
  color: #f01414;
  font-size: 30px;
  margin-right: 16px;
  margin-left: 10px
}

.indicator-text {
  color: #888888;
  font-size: 42px;
  text-align: center;
}

.loading {
  width: 750px;
  /* height: 250px; */
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.button01_wrap{
  display: flex;
  flex-direction: row;
  justify-content: flex-end
}









body {
  background-color: #e6e6e6;
}

.app {
  flex: 1;
}

.iconr {
  width: 100px;
  height: 100px;
  color: #ffffff;
}

.tabbar {
  width: 750px;
  flex: 1;
}

.page-content {
  width: 750px;
}

.content-text {
  font-size: 24px;
}

.page-navbar {
  width: 750px;
  height: 90px;
}

.page-navbar-title {
  color: #ffffff;
  font-size: 28px;
}

.page-content-image {
  width: 480px;
  height: 480px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.privacyBox{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.privacyContent{
  width: 650px;
  /* height: 900px; */
  background-color:white ;
  border-radius: 12px;
  display: flex;
  /* align-items: center; */
  padding-bottom: 50px;
}
.privacy_headerTitle{
  font-size: 42px;
  color: #333333;
  font-weight: bold;
  margin-top: 30px;
  text-align: center;
}
.privacy_title{
  font-size: 30px;
  color: #999999;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
.privacy_botton{
  width: 650px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  margin-top: 30px;
}
.privacy_botton_left{
  width: 280px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(202,250,241,1);
  border-radius: 50px;
}
.privacy_botton_left_title{
  /*font-size: 22px;*/
  font-size: 32px;
  color: rgba(42,195,185,1);
}
.privacy_botton_right{
  width: 280px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff8400;
  border-radius: 50px;
}
.privacy_botton_right_ittle{
  color: white;
  font-size: 32px;
}



</style>
